<template>
  <div class="product">
    <div class="product_title">产品管理</div>
    <div class="product_button">
      <el-button type="primary" id="product_add" size="small" @click="addProduct">添加</el-button>
      <el-input placeholder="请输入产品名称" clearable id="product_input" v-model="input"></el-input>
      <el-button type="primary" id="product_search" size="small" @click="sreachProduct">查询</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="productData.list" style="width: 100%" id="product_table">
      <el-table-column prop="id" label="编号" min-width="78" align="center"></el-table-column>
      <el-table-column prop="name" label="产品名称" min-width="219" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" min-width="219" align="center"></el-table-column>
      <el-table-column prop="description" label="产品描述" min-width="219" align="center"></el-table-column>
	  <el-table-column prop="categoryId" label="所属产品" min-width="219" align="center"></el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="deleteProduct(row)">删除</el-button>
          <el-button type="text" size="small" @click="editProduct(row)">编辑</el-button>
          <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="product_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <!-- {{form}} -->
      <el-form :model="form" ref="ruleForm" label-width="80px">
        <el-form-item label="产品名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属栏目">
          <el-select v-model="form.categoryId" placeholder="请选择">
            <el-option v-for="item in allProducts" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
			type="textarea"
			:rows="3"
			v-model="form.description">
			</el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProduct">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 0,
      pageSize: 5,
      total: 10,
      input: "",
      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        description: "",
        price: "",
        categoryId: "",
      },
      title: "添加产品信息"
    };
  },
  created() {
    this.loadProducts();
  },
  computed: {
    ...mapState("product", ["productData",["allProducts"]])
  },
  methods: {
    ...mapActions("product", [
      "toLoadProducts",
      "toSaveProducts",
	  "toDeleteProducts",
	  "toLoadAllProducts"
    ]),
    //加载
    loadProducts() {
      let obj = {
        page: this.page,
        pageSize: this.pageSize
      };
      this.toLoadProducts(obj).then(res => {
        this.total = this.productData.total;
	  });
	  this.toLoadAllProducts();
    },
    //分页
    handleCurrentChange(val) {
      this.page = val -1;
      this.loadProducts();
    },
    //编辑
    editProduct(row) {
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.description = row.description;
      this.form.price = row.price;
      this.form.categoryId = row.categoryId;
      this.title = "编辑产品信息";
    },
    //新增
    addProduct() {
      this.dialogFormVisible = true;
      this.form = {};
      this.title = "添加产品信息";
    },
    //保存
    saveProduct() {
      this.toSaveProducts(this.form).then(response => {
        this.$message({ type: "success", message: "保存成功" });
        this.dialogFormVisible = false;
        this.loadProducts();
      });
    },
    //删除
    deleteProduct(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.toDeleteProducts(row.id).then(response => {
          this.$message({ type: "success", message: "删除成功" });
          this.loadProducts();
        });
      });
    },
    //查询
    sreachProduct() {
      this.page = 0;
      let obj = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.input
      };
      this.toLoadProducts(obj).then(response => {
        this.total = this.productData.total;
      });
    },
    toDetails(row) {
      this.$router.push({ name: "productDetails", query: { id: row.id } });
    }
  }
};
</script>
<style scope>
.product {
  padding: 10px;
}
.product_title {
  border-bottom: 1px solid #ccc;
  height: 35px;
  line-height: 35px;
}
.product_button {
  margin-top: 10px;
  position: relative;
}
.product_button > * {
  display: inline-block !important;
}
#product_input {
  position: absolute;
  top: -50px;
  left: 94px;
  width: 200px;
}
#product_search {
  position: absolute;
  top: 1px;
  left: 304px;
}
.product_page {
  margin-top: 10px;
}
</style>